<template>
    <div>
        <div class="tool-bar-lf">
            <el-icon :size="20" class="mr-4 cursor-pointer" @click="changeCollapse">
                <Food />
            </el-icon>
            <!-- 面包屑 -->
            <el-breadcrumb :separator-icon="ArrowRight">
                <transition-group name="breadcrumb">
                    <el-breadcrumb-item v-for="(item) in breadcrumbList" :key="item.path">
                        <!-- <div class="el-breadcrumb__inner is-link" @click="onBreadcrumbClick(item, index)">
                            <el-icon class="breadcrumb-icon" v-show="item.meta.icon && themeConfig.breadcrumbIcon">
                                <component :is="item.meta.icon"></component>
                            </el-icon> -->
                            <span class="breadcrumb-title">{{ item.meta.title }}</span>
                        <!-- </div> -->
                    </el-breadcrumb-item>
                </transition-group>
            </el-breadcrumb>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ArrowRight } from "@element-plus/icons-vue"
import {
    Food
} from '@element-plus/icons-vue'
import { GlobalStore } from "@/stores/modules/global";
import { useRoute } from "vue-router";
// import { AuthStore } from "@/stores/modules/auth";

const route = useRoute();
// const authStore = AuthStore();
const breadcrumbList = computed(() => {
    // let breadcrumbData = [
    //     { path: 'index', meta: { title: "首页" }},
    //     { path: 'test', meta: { title: "首页2" }},
    //     { path: 'test1', meta: { title: "首页3" }},
    //     { path: 'test4', meta: { title: "首页4" }}
    // ]
    // let breadcrumbData = cs[route.matched[route.matched.length - 1].path] ?? [];
	// let breadcrumbData = authStore.breadcrumbListGet[route.matched[route.matched.length - 1].path] ?? [];
	// // 🙅‍♀️不需要首页面包屑可删除以下判断
	// if (breadcrumbData[0].meta.title !== route.meta.title) {
	// 	breadcrumbData = [{ path: HOME_URL, meta: { icon: "HomeFilled", title: "首页" } }, ...breadcrumbData];
	// }
    console.log('ss', route.matched[route.matched.length - 1].path, route.matched)
	return route.matched.filter(f => f.name !== 'layout');
});

const globalStore = GlobalStore();
// const themeConfig = computed(() => globalStore.themeConfig);

// const collapse = () => {
// 	globalStore.setThemeConfig({ ...themeConfig.value, isCollapse: !themeConfig.value.isCollapse });
// };
const changeCollapse = () => globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);

</script>

<style scoped>
.tool-bar-lf {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
}
</style>